{% extends 'base.html' %}
{% load static from staticfiles %}

{% block css_content %}
    <link rel="stylesheet" type="text/css" media="all" href="{% static "daterangepicker/daterangepicker-bs3.css" %}"/>
    <style type="text/css">
    #harpc_log .modal-body
    {
      height:500px;
      overflow:auto;
    }
    </style>
{% endblock %}


{% block page_content %}
    {% if isExists %}
        <div class="container-fluid main-content">
            <div class="page-title">
                <h1>
                    clients
                </h1>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <ul class="breadcrumb">
                        <li>
                            <a href="{% url "manage.views.service" %}"></a><i class="icon-home"></i>
                        </li>
                        <li>
                            <a href="{% url "manage.views.service" %}">{{ service }}</a>
                        </li>
                        <li class="active">
                            clients
                        </li>
                    </ul>
                </div>
                <div class="col-lg-12">
                    <div class="widget-container fluid-height clearfix">
                        <div class="heading">
                            <i class="icon-table"></i>clients列表
                        </div>
                        <div class="widget-content padded clearfix">
                            <table class="table table-bordered table-striped" style="word-wrap: break-word;word-break: break-all;" id="clients-table">
                                <thead>
                                <th>
                                    clients
                                </th>
                                <th>
                                    客户端名
                                </th>
                                <th class="hidden-xs">
                                    客户端负责人
                                </th>
                                <th class="hidden-xs">
                                    底层协议
                                </th>
                                <th class="hidden-xs">
                                    操作
                                </th>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="harpc_log" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" style="width: 100%;">
                <div class="modal-content" style="width: 100%;">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <form class="form-horizontal modal-title">
                            <div class="input-prepend input-group">
                    <span class="add-on input-group-addon"><i
                            class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                                <input type="text" style="width: 400px" name="reservation"
                                       id="reservationtime"
                                       class="form-control"
                                       class="span4"/>
                            </div>
                        </form>
                    </div>
                    <div class="modal-body">
                        <table id="log_table" class="table table-striped table-bordered" cellpadding="0" cellspacing="0"
                               class="display" border="0" style="word-wrap: break-word;word-break: break-all;"
                               width="100%">
                            <thead>
                            <tr>
                                <th>日志时间</th>
                                <th>平均响应时间</th>
                                <th>最小响应时间</th>
                                <th>最大响应时间</th>
                                <th>每秒请求次数</th>
                                <th>成功次数</th>
                                <th>失败次数</th>
                            </tr>
                            </thead>
                        </table>
                        <div id="log_chart"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary"
                                data-dismiss="modal">
                            确认
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    {% else %}
        <div class="container-fluid main-content">
            <div class="page-title">
                <h1>
                    servers
                </h1>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="widget-container fluid-height clearfix">
                        <div class="heading">
                            <i class="icon-collapse"></i>您需要选择一个存在的并有效service，才能查看其中的clients
                        </div>
                        <div class="widget-content padded">
                            <form action="{% url "manage.views.clients" %}" class="form-horizontal">
                                <div class="form-group">
                                    <label class="control-label col-md-2">service</label>

                                    <div class="col-md-7">
                                        <select class="select2able" name="service">
                                            {% for service in services %}
                                                <option value="{{ service.0 }}">{{ service.0 }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-2"> </label>

                                    <div class="col-md-7">
                                        <button class="btn btn-primary" type="submit">确认</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block js_content %}
    {% if isExists %}
        <script src="{% static "daterangepicker/moment.js" %}" type="text/javascript"></script>
        <script src="{% static "daterangepicker/daterangepicker.js" %}" type="text/javascript"></script>
        <script type="text/javascript" src="{% static "layer/layer.js" %}"></script>
        <script type="text/javascript" src="{% static "highchart/highcharts.js" %}"></script>
        <script type="text/javascript" src="{% static "highchart/modules/exporting.js" %}"></script>
        <script type="text/javascript">
            var serversTable = $("#clients-table").DataTable({
                "sPaginationType": "full_numbers",
                "language": {
                    url: "{% static 'datatable/Chinese.json' %}"
                },
                "ajax": {
                    url: "{% url 'manage.views.ajax_clients' %}",
                    type: "POST",
                    data: {
                        'service': '{{ service }}'
                    }
                },
                "columns": [
                    {
                        "sWidth": "20%"
                    },
                    {"sWidth": "20%"},
                    {"sWidth": "20%"},
                    {"sWidth": "20%"},
                    {"sWidth": "20%"},
                ],
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            return '<div class="action-buttons">' +
                                    '<a class="table-actions" onclick="log(\'{{ service }}\',\'clients\',\'' + row[0] + '\')" style=\"cursor:pointer;\" ><i class="icon-eye-open"></i></a>' +
                                    '</div>';
                        },
                        "targets": 4
                    },
                ]
            });

            var global_service;
            var global_type;
            var global_key;

            function log(service, type, key) {
                global_service = service;
                global_type = type;
                global_key = key;
                $('#harpc_log').modal('show');

            }
            $('#harpc_log').on('shown.bs.modal', function () {
                initdatadaterangepicker(global_service, global_key, global_type);
                initTable(global_service, global_key, global_type, $('#reservationtime').data('daterangepicker').startDate.format('YYYYMMDDHHmmss'), $('#reservationtime').data('daterangepicker').endDate.format('YYYYMMDDHHmmss'));
                var chart = $('#log_chart').highcharts();
                //$('#log_chart').css('visibility', 'initial');
                chart.reflow();
            })

            function initdatadaterangepicker(service, key, type) {
                $('#reservationtime').val(moment().add('days', -7).format('MM/DD/YYYY h:mm A') + " - " + moment().format('MM/DD/YYYY h:mm A'));
                $('#reservationtime').daterangepicker({
                    timePicker: true,
                    timePickerIncrement: 1,

                    format: 'MM/DD/YYYY h:mm A',
                }, function (start, end, label) {
                    initTable(service, key, type, start.format('YYYYMMDDHHmmss'), end.format('YYYYMMDDHHmmss'));
                });
            }

            var table = null;
            function initTable(service, key, type, start, end) {
                $.ajax({
                    url: "{% url 'manage.views.ajax_harpc_log' %}",
                    method: 'POST',
                    data: {
                        'service': service,
                        'key': key,
                        'type': type,
                        'start': start,
                        'end': end
                    },
                    success: function (data) {
                        if (table != null) {
                            table.destroy();
                        }
                        table = $('#log_table').DataTable({
                            "sPaginationType": "full_numbers",
                            language: {
                                url: "{% static 'datatable/Chinese.json' %}"
                            },
                            "aaData": data['tables'],
                            "columnDefs": [{
                                "render": function (data, type, row) {
                                    if (data == 'total') {
                                        return '合计'
                                    } else {
                                        var year = Math.floor(data / 10000000000);
                                        var month = Math.floor(Math.floor(data % 10000000000) / 100000000);
                                        var day = Math.floor(Math.floor(data % 100000000) / 1000000);
                                        var hour = Math.floor(Math.floor(data % 1000000) / 10000);
                                        var min = Math.floor(Math.floor(data % 10000) / 100);
                                        var sec = Math.floor(data % 100);
                                        return year + '年' + month + '月' + day + '日' + '-' + hour + '时' + min + '分' + sec + '秒';
                                    }
                                    return data;
                                },
                                "type": "html-percent",
                                "targets": 0
                            }],
                            "columns": [
                                {
                                    "sWidth": "15%"
                                },
                                {"sWidth": "15%"},
                                {"sWidth": "15"},
                                {"sWidth": "15%"},
                                {"sWidth": "15%"},
                                {"sWidth": "15%"},
                                {"sWidth": "10%"},
                            ],
                            "fnDrawCallback": function (oSettings) {
                            }
                            //"order": [[2, "desc"]]

                        });
                        var series = data['series'];
                        for (index in series) {
                            var serie = series[index];
                            var serie_datas = serie['data'];
                            for (i in serie_datas) {
                                var serie_data = serie_datas[i];
                                var date = Date.UTC(serie_data[0], serie_data[1], serie_data[2], serie_data[3], serie_data[4], serie_data[5]);
                                var value = serie_data[6];
                                series[index]['data'][i] = [date, value];
                            }
                        }
                        if (series.length > 0) {
                            $('#log_chart').highcharts({
                                chart: {
                                    type: 'spline'
                                },
                                title: {
                                    text: '节点日志趋势图'
                                },
                                subtitle: {
                                    text: '数据来源harpc_admin'
                                },
                                xAxis: {
                                    type: 'datetime',
                                    dateTimeLabelFormats: { // don't display the dummy year
                                        second: '%H:%M:%S',
                                        minute: '%H:%M',
                                        hour: '%H:%M',
                                        day: '%e. %b',
                                        week: '%e. %b',
                                        month: '%b \'%y',
                                        year: '%Y'
                                    }
                                },
                                yAxis: [{
                                    title: {
                                        text: 'ms'
                                    },
                                    min: 0
                                }, {
                                    title: {
                                        text: '次'
                                    },
                                    min: 0,
                                    opposite: true
                                }
                                ],
                                tooltip: {
                                    formatter: function () {
                                        return '<b>' + this.series.name + '</b><br>' +
                                                Highcharts.dateFormat('%b/%e %H:%M:%S', this.x) + ' value= ' + this.y;
                                    }
                                },

                                series: series
                            },function(innerChart) {
                                //innerChart.reflow()
                            });

                            var chart = $('#log_chart').highcharts();
                            var series_chart = chart.series;
                            for (var i = 1, len = series_chart.length; i < len; i++) {
                                series_chart[i].hide();
                            }
                        } else {
                            $('#log_chart').empty();
                        }
                    },
                    error: function () {
                        layer.msg('服务器内部异常', {icon: 2});
                    }
                });
            }

        </script>
    {% else %}
        <script type="text/javascript">
            $('.select2able').select2();
        </script>
    {% endif %}
{% endblock %}